<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .header {
            position: absolute;
        }
        .header h1 {
            margin-top: 0px;
        }
        .user {
            position: relative;
            top: 0;
            right: 0;
            display: block;
            float: right;
            top: 0;
        }
        .user a {
            margin-top: 5px;
            display: block;
        }
        .user p {
            margin-top: 5px;
            margin-bottom: 5px;
        }
        .content-issue-container {
            display: flex; /* 使用 Flexbox 布局 */
            justify-content: space-between; /* 子元素之间的间隔均匀分布 */
            align-items: center; /* 垂直居中对齐 */
            position: relative;
            top: 50px;
        }
        .content-issue-container > div {
            flex: 1; /* 子元素占据相同的空间 */
        }
        .content ul li {
            width: auto; /* 子元素宽度自适应 */
        }
        img {
            height: 33px;
            width: 33px;
        }
        .webide {
            /*display: flex; !* 使用 Flexbox 布局 *!*/
            justify-content: space-between; /* 子元素之间的间隔均匀分布 */
            align-items: center; /* 垂直居中对齐 */
            position: relative;
            top: 50px;
        }

    </style>
</head>
<body>
    <div class="header">
        <h1>Devops System</h1>
    </div>
    <div class="user">
        <img src="{{ .picture }}" alt="">
        <p>{{ .username }}</p>
        <a href="/register">register</a>
        <a href="/login">login</a>
        <a href="/user/logout">logout</a>
        <a href="/user/info">info</a>
    </div>
    <div class="content-issue-container">
        <div class="content">
            <ul>
                <li>
                    <a href="/devops">devops</a>
                </li>
                <li>
                    <a href="/user">user</a>
                </li>
                <li>
                    <a href="/project">project</a>
                </li>
                <li>
                    <a href="/issue">issue</a>
                </li>
                <li>
                    <a href="/k8s">k8s</a>
                </li>
                <li>
                    <a href="/scrum">scrum</a>
                </li>
            </ul>
        </div>
        <div class="user_issue">
            <p>your issue: </p>
            <ul>
                {{ range .user_issues }}
                <li>{{ . }}</li>
                {{ end }}
            </ul>
        </div>
    </div>
    {{ if .has_webide }}
    <div class="webide">
        <h4>your web ide</h4>
        <p><a href="{{ .webide_url }}">{{ .webide }}</a></p>
    </div>
    {{ end }}
</body>
</html>